<template>
  <div>
    <button @click="sendMessage">发送全局消息</button>
    <button @click="updateData">更新数据</button>
    <!-- Commentsslot插槽传值 -->
    <div>
      <slot
       name="item"
       v-for = 'item in items'
       :item = 'item'
       :index = 'item.id'
        >
        <div>{{ item.text }}</div>
        </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,ComponentInternalInstance, getCurrentInstance } from 'vue';


const items = ref([
  { id: 1, text: '项目 1' },
  { id: 2, text: '项目 2' },
  { id: 3, text: '项目 3' }
]);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const sendMessage = () => {
    proxy!.$eventBus.emit('global-message', '来自子组件的问候');
};

const updateData = () => {
  proxy!.$eventBus.emit('data-update', { id: 2, value: '更新后的值' })
};
</script>